<div class="modal-header">
  <h4 class="modal-title">录入进货通知</h4>
  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
</div>
<div class="modal-body">
  <form #form="ngForm" (ngSubmit)="save()">
    <!-- Row 1 -->
    <div class="row">
      <div class="col-md-2 mb-3">
        <label class="form-label">货主 *</label>
        <select class="form-select" name="shipper" [(ngModel)]="customerGood.shipper" required>
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let shipper of shippers$ | async" [value]="shipper.id">{{ shipper.name }}</option>
        </select>
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">预计到货时间</label>
        <input type="datetime-local" class="form-control" name="estimatedArrivalTime" [(ngModel)]="customerGood.estimatedArrivalTime">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">客户订单号</label>
        <input type="text" class="form-control" name="customerOrderNo" [(ngModel)]="customerGood.customerOrderNo">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">运输号码</label>
        <input type="text" class="form-control" name="transportNo" [(ngModel)]="customerGood.transportNo">
      </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
      <div class="col-md-2 mb-3">
        <label class="form-label">运输公司</label>
        <input type="text" class="form-control" name="transportCompany" [(ngModel)]="customerGood.transportCompany">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">供应商</label>
        <input type="text" class="form-control" name="supplier" [(ngModel)]="customerGood.supplier">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">供应商编码</label>
        <input type="text" class="form-control" name="supplierCode" [(ngModel)]="customerGood.supplierCode">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">预约库区</label>
         <select class="form-select" name="reservedWarehouseArea" [(ngModel)]="customerGood.reservedWarehouseArea">
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let area of reservedWarehouseAreas$ | async" [ngValue]="area.id">{{ area.name }}</option>
        </select>
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">仓库</label>
         <select class="form-select" name="warehouse" [(ngModel)]="customerGood.warehouse">
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let warehouse of warehouses$ | async" [ngValue]="warehouse.id">{{ warehouse.name }}</option>
        </select>
      </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
      <div class="col-md-2 mb-3">
        <label class="form-label">订单类型</label>
         <select class="form-select" name="orderType" [(ngModel)]="customerGood.orderType">
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let type of orderTypes$ | async" [ngValue]="type.id">{{ type.name }}</option>
        </select>
      </div>
      <div class="col-md-4 mb-3">
        <label class="form-label">备注</label>
        <input type="text" class="form-control" name="remarks" [(ngModel)]="customerGood.remarks">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">附件</label>
        <div class="d-grid">
          <button type="button" class="btn btn-secondary" (click)="fileInput.click()" [disabled]="!!customerGood.attachmentPath">
            选择文件
          </button>
        </div>
        <input type="file" #fileInput style="display: none" (change)="onFileSelected($event)" accept=".png,.jpg,.jpeg,.pdf,.doc,.docx">
        <input type="hidden" name="attachmentPath" [(ngModel)]="customerGood.attachmentPath">
        <div *ngIf="customerGood.attachmentPath" class="mt-1 d-flex justify-content-between align-items-center">
          <span class="text-truncate" [title]="customerGood.attachmentPath">{{ customerGood.attachmentPath }}</span>
          <button type="button" class="btn-close" aria-label="清除文件" (click)="clearAttachment()"></button>
        </div>
      </div>
    </div>
    <!-- Row 4 -->
    <div class="row">
      <div class="col-md-2 mb-3">
        <label class="form-label">车号</label>
        <input type="text" class="form-control" name="carNo" [(ngModel)]="customerGood.carNo">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">司机</label>
        <input type="text" class="form-control" name="driverName" [(ngModel)]="customerGood.driverName">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">司机电话</label>
        <input type="text" class="form-control" name="driverPhone" [(ngModel)]="customerGood.driverPhone">
      </div>
      <div class="col-md-2 mb-3">
        <label class="form-label">进货通知单号</label>
        <input type="text" class="form-control" name="purchaseOrderNo" [(ngModel)]="customerGood.purchaseOrderNo">
      </div>
    </div>

    <!-- Section: 进货通知明细 -->
    <h6 class="mt-4">进货通知明细</h6>
    <hr>
    <div class="d-flex justify-content-start mb-3">
      <button type="button" class="btn btn-info me-2" (click)="addRow()">添加</button>
      <button type="button" class="btn btn-secondary" (click)="batchAdd()">合计</button>
    </div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>序号</th>
          <th>操作</th>
          <th>商品编码</th>
          <th>数量</th>
          <th>计划占用储位数</th>
          <th>收货完成</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of goodCodeItems; let i = index">
          <td>{{ i + 1 }}</td>
          <td>
            <button type="button" class="btn btn-sm btn-danger" (click)="removeRow(i)">删除</button>
          </td>
          <td>
            <input type="text" class="form-control" [(ngModel)]="item.productCode" [name]="'productCode' + i" (click)="openGoodsDialog(i)" readonly>
          </td>
          <td>
            <input type="number" class="form-control" [(ngModel)]="item.quantity" [name]="'quantity' + i">
          </td>
          <td>
            <input type="number" class="form-control" [(ngModel)]="item.plannedStorageSlots" [name]="'slots' + i">
          </td>
          <td>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" [name]="'status' + i" [value]="'Yes'" [(ngModel)]="item.status">
              <label class="form-check-label">是</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" [name]="'status' + i" [value]="'No'" [(ngModel)]="item.status">
              <label class="form-check-label">否</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" [name]="'status' + i" [value]="'Initial'" [(ngModel)]="item.status">
              <label class="form-check-label">初始</label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <hr class="mt-4">
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">取消</button>
  <button type="button" class="btn btn-primary" (click)="save()">保存</button>
</div> 